<template>
    <div class="head">
        <div class="username" v-if="userInfo">
            你好！{{userInfo.account}}
        </div>
        <div class="roll-msg">
            <el-col :span="8" class="headflex">
                <marquee behavior="" direction="" class="martext">
                    富强、民主、文明、和谐、自由、平等、公正、法治，爱国、敬业、诚信、友善。
                </marquee>
            </el-col>
        </div>
        <div class="info" v-if='userInfo'>
            <span>{{role[userInfo.role-1]}}</span>
            <span>{{userInfo.account}}</span>
            <el-button type="warning" @click="outLogin">退出</el-button>
        </div>
        
    </div>
</template>
<script>
import { reactive, toRefs,computed,onMounted } from 'vue'
import { ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import {useStore} from 'vuex'
export default {
    setup(props){
        const store =useStore()
         const userInfo=computed(()=>store.state.userInfo)
        const router = useRouter()
        const state = reactive({
            role:['学生','教师','教务','管理员']
        })
        const outLogin = ()=>{
            ElMessageBox.confirm(
                '亲,你真的要退出登录吗',
                '温馨提示',
                {
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }
            )
            .then(()=>{
                router.replace({name:'login'})
                sessionStorage.removeItem('token')
                store.commit('changeUserInfo',null)
            })
        }

        onMounted(()=>{
            
        })
        return {
        ...toRefs(state),
          outLogin,
          userInfo,
          
        }
            }
}
</script>
<style lang="scss" scoped>
.head{
    width: 100%;
    background: #b3c0d1;
    display: block;
    display: flex;
    justify-content: space-between;
    .roll-msg{
        width: 300px;
        .headflex{
            width: 300px;
            .martext{
                width: 300px;
                color: #666;

            }
        }
    }
    .info{
        width: 200px;
        justify-content: space-between;
        display: flex;
        align-items: center;
        align-items: center;
    }
}

    
</style>